Question title

How to add column total information to the list

Problem description

In the list, you hope to display the total information of a column, such as sum, average, etc.

Solution

VTable provides aggregation configuration for configuring data aggregation rules and display positions in the table. You can configure aggregation to specify global rules for aggregation in options, or configure aggregation to specify aggregation rules for each column. The following properties need to be configured in aggregation :

• aggregationType:
  
• Sum, set aggregationType to AggregationType. SUM
  
• Average, set aggregationType to AggregationType. AVG
  
• Maximum value, set aggregationType to AggregationType. MAX
  
• Minimum, set aggregationType to AggregationType. MIN
  
• Count, set aggregationType to AggregationType. COUNT
  
• Custom function, set aggregationType to AggregationType. CUSTOM , set custom aggregation logic through aggregationFun
  
• aggregationFun: Custom aggregation logic when aggregationType is AggregationType. CUSTOM
  
• showOnTop: Controls the display position of the aggregated results. The default is false , which means the aggregated results are displayed at the bottom of the body. If set to true , the aggregated results are displayed at the top of the body.
  
• FormatFun: Set the formatting function of aggregate values, and customize the display format of aggregate values.
  

Code example

const options = {
    //......
    columns: [
      {
        aggregation: [
          {
            aggregationType: VTable.TYPES.AggregationType.MAX,
            // showOnTop: true,
            formatFun(value) {
              return '最高薪资:' + Math.round(value) + '元';
            }
          }
        ]
      },
      // ......
    ]
};</br>

Results show

Example code: https://www.visactor.io/vtable/demo/list-table-data-analysis/list-table-aggregation-multiple

Related Documents

Basic Table Data Analysis Tutorial: https://www.visactor.io/vtable/guide/data_analysis/list_table_dataAnalysis
Related api: https://www.visactor.io/vtable/option/ListTable#aggregation
github：https://github.com/VisActor/VTable